<template>
  <div class="alipay-config-page">
    <page-header-wrapper>
      <page-tab-list>
        <template>
          <a-row :gutter="[16, 30]" type="flex" align="middle" style="margin-top: 10px">
            <a-col class="required" :span="4" style="text-align: right"> 服务协议： </a-col>
            <a-input class="input-class" :value="params.alliance_service_article" disabled />
            <a-button type="primary" @click="openPop('alliance_service_article')"> 编辑 </a-button>
          </a-row>

          <a-row :gutter="[16, 30]" type="flex" align="middle" style="margin-top: 10px">
            <a-col class="required" :span="4" style="text-align: right"> 隐私政策： </a-col>
            <a-input class="input-class" :value="params.alliance_privacy_article" disabled />
            <a-button type="primary" @click="openPop('alliance_privacy_article')"> 编辑 </a-button>
          </a-row>

          <a-row :gutter="[30, 30]" type="flex" align="middle">
            <a-col offset="10">
              <a-button type="primary" @click="onSave"> 保存 </a-button>
            </a-col>
          </a-row>
        </template>
      </page-tab-list>
    </page-header-wrapper>

    <a-modal title="编辑" width="800px" v-model="visible" @ok="submit" :afterClose="closeModal" :destroyOnClose="true">
      <a-form-model ref="ruleForm">
        <a-form-model-item>
          <WangEditor autoFocus :value="getArticle" @change="change"></WangEditor>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { getAllianceArticle, setAllianceArticle } from '@/api/setting/alipayConfig'
import { WangEditor } from '@/components'

export default {
  name: 'AlipayService',
  components: {
    WangEditor,
  },

  data() {
    return {
      params: {
        alliance_service_article: '',
        alliance_privacy_article: '',
      },

      btnLoading: false,
      el: '',
      visible: false,
      value: '',
    }
  },

  created() {
    this.getData()
  },

  computed: {
    getArticle() {
      if (!this.el) return ''
      return this.params[this.el]
    },
  },

  methods: {
    submit() {
      this.visible = false

      let { params, value, el } = this
      params[el] = value
    },

    change(value) {
      this.value = value
    },

    openPop(el) {
      this.el = el
      this.visible = true
    },

    onSave() {
      const hide = this.$message.loading('提交中', 0)
      setAllianceArticle(this.params).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success('保存成功！')
        }
      })
    },
    getData() {
      getAllianceArticle().then((res) => {
        const data = res.data
        if (data) {
          this.params = data;
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.alipay-config-page {
  .required::before {
    content: '*';
    color: red;
  }
}

.mt {
  margin-top: 50px;
}

.input-class {
  width: 300px;
}
</style>
